<template>
	<view class="content">
		<!-- <image class="avatar" :src="avatarUrl" mode="scaleToFill"></image>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">修改头像</button> -->
		<view class="uname">
			<span class="iconfont icon-jurassic_user"></span>
			<input type="text" v-model="uname" placeholder="用户名(4到16位字母，数字)">
		</view>
		<view class="pwd">
			<span class="iconfont icon-mima"></span>
			<input type="text" v-model="pwd" placeholder="登录密码(6-16位数字字母组合)" @blur="sendPwd">
		</view>
		<button class="btn" @click="doZhuce">注册</button>
		<label class="checkbox">
			<checkbox :value="check" @click="doCheck" /><text @click="showAgreement">《宿舍管理系统用户协议》</text>
		</label>
	</view>
</template>

<script>
	export default {
		name: "component_wx",
		props: ['isShowClock', 'phonePwd', "openid"],
		data() {
			return {
				//avatarUrl: '/static/avatar.png',
				phoneNum: '',
				phone_pwd: '',
				uname: '',
				pwd: '',
				check: 0,
				clock: 59,
				timer: null
			};
		},
		methods: {
			// onChooseAvatar(event) {
			// 	this.avatarUrl = event.detail.avatarUrl
			// },
			sendPhonePwd() {
				this.$emit('getPhonePwd', this.phoneNum);
			},
			sendisShowClock() {
				this.$emit('getisShowClock');
			},
			doCheck() {
				this.check ? this.check = 0 : this.check = 1
			},
			doZhuce() {
				this.$emit('doZhuce', {
					uname: this.uname,
					check: this.check,
					pwd: this.pwd,
					openid: this.$props.openid,
					//avatar: this.avatarUrl,
					componentName: 'wx'
				});
			},
			showAgreement() {
				uni.navigateTo({
					url: "/pages/agreement/agreement"
				})
			}
		},
		watch: {
			'isShowClock'(a, b) {
				if (a === 1) {
					this.timer = setInterval(() => {
						this.clock--;
						if (this.clock == 0) {
							clearInterval(this.timer);
							this.sendisShowClock();
						}
					}, 1000);
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		margin-top: 20rpx;
		view {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #00aa7f;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			margin-top: 40rpx;
			padding-left: 20rpx;
			color: #00aa7f;

			input {
				width: 70%;
				height: 100%;
				padding-left: 20rpx;
				color: black;
			}
		}

		.phone_num {
			.check_num {
				color: #00aa7f;
				text-decoration: underline;
				font-size: 25rpx;
			}
		}

		.btn {
			width: 70%;
			height: 80rpx;
			background-color: #00aa7f;
			line-height: 80rpx;
			border-radius: 25rpx;
			margin-top: 100rpx;
			color: #F9FFF9;
		}

		.checkbox {
			color: #00aa7f;
			margin: 50rpx;
		}
	}
</style>